<template>
  <div class="page-x">
    <div class="g6-x" id="containerG6"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'

export default {
  name: 'Started',
  data() {
    return {
      gplot: null, // 拓扑图实例
      gplotData: {
        // 点集
        nodes: [
          {
            id: 'node1', // String，该节点存在则必须，节点的唯一标识
            label: "默认矩形1", // 节点上的文字
            x: 50, // Number，可选，节点位置的 x 值
            y: 50, // Number，可选，节点位置的 y 值
          },
          {
            id: 'node2',
            label: "默认矩形2",
            x: 250,
            y: 50,
          },
          {
            id: 'node3',
            label: 'Circle1',
            x: 150,
            y: 100,
            type: 'circle', // 节点类型 https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode#%E5%9C%A8%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE
            style: {
              r: 40, // 圆形节点的半径
              stroke: '#ef476f',
              lineWidth: 2
            }
          },
          {
            id: 'node4',
            label: '自定义矩形',
            x: 20,
            y: 350,
            type: 'rect',
            style: {
              width: 100,
              height: 50,
              radius: 10,
              lineWidth: 4
            }
          },
          {
            id: 'node5',
            label: '自定义椭圆',
            x: 20,
            y: 350,
            type: 'ellipse',
            style: {
              rx: 50,
              ry: 30,
              lineWidth: 4
            }
          },
          {
            id: 'node6',
            label: '自定义菱形',
            type: 'diamond',
            style: {
              lineWidth: 2
            },
            size: [120, 60]
          }
        ],
        // 边集
        edges: [ // https://g6.antv.vision/zh/docs/manual/middle/elements/edges/defaultEdge
          {
            source: 'node1', // String，必须，起始点 id
            target: 'node2', // String，必须，目标点 id
            type: 'line',
            label: '直线'
          },
          {
            source: 'node1',
            target: 'node3',
            type: 'polyline',
            label: '折线'
          },
          {
            source: 'node2',
            target: 'node4',
            type: 'arc',
            label: '弧线'
          },
          {
            source: 'node3',
            target: 'node6',
            type: 'cubic',
            label: 'cubic',
            style: {
              stroke: '#06d6a0', // 线的颜色
              lineWidth: 4, // 线的重量
              startArrow: true, // 开始箭头
              endArrow: true, // 结束箭头
            }
          },
          {
            source: 'node5',
            target: 'node6',
            style: {
              stroke: '#118ab2',
              lineWidth: 4,
              lineDash: [5, 15, 25]
            }
          }
        ]
      }
    }
  },
  methods: {
    drawing() {
      this.gplot = new G6.Graph({
        container: containerG6, // String | HTMLElement，必须，容器 id 或容器本身
        width: containerG6.offsetWidth, // 设置画布宽度。 Number，必须
        height: containerG6.offsetHeight - 4, /// 设置画布高度。Number，必须
        // 布局设置
        // 布局文档：https://g6.antv.vision/zh/docs/manual/tutorial/layout
        layout: {
          type: 'dagre' // 层次布局
        },
        // 默认节点配置（这里的配置是全局的配置，将会在所有节点上生效）
        // 节点文档：https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode
        defaultNode: {
          type: 'rect', // 矩形
          style: { // https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode#%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-style
            radius: 4, // 圆角半径
            lineWidth: 6, // 边框宽度
            fill: '#f4f1de', // 背景色
            stroke: '#f2cc8f', // 边框颜色
            shadowColor: '#f4f1de', // 投影颜色
            shadowBlur: 10, // 投影羽化
            shadowOffsetX: 0, // 投影x轴偏移
            shadowOffsetY: 0, // 投影y轴偏移
            cursor: 'move', // 鼠标移动到节点上的样子，CSS 的 cursor 选项都支持 https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
          },
          labelCfg: { // 文本配置项  https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode#%E6%A0%87%E7%AD%BE%E6%96%87%E6%9C%AC-label-%E5%8F%8A%E5%85%B6%E9%85%8D%E7%BD%AE--labelcfg
            style: {
              fontSize: 14, // 文本字体大小
              fill: '#e07a5f', // 文本颜色
            }
          }
        }
      })

      /**
       * graph.read(data)
       * 接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。
       * 官方文档：https://g6.antv.vision/zh/docs/api/graphFunc/data#graphreaddata
       * 
       * 等同于
       * graph.data(data.value)
       * graph.render()
       */
      this.gplot.read(this.gplotData)
    }
  },
  mounted() {
    this.drawing()
  }
}
</script>

<style lang="scss" scoped>
.g6-x {
  width: 100%;
  height: 100%;
}
</style>